HTML-Grundlagen

HTML (kurz für Hypertext Markup Language) ist eine rein textbasierte Auszeichnungssprache zur strukturierten Darstellung von Texten, Grafiken und Hyperlinks in HTML-Dokumenten. HTML-Dokumente können von jedem Webbrowser dargestellt werden und gelten somit als Basis für das Internet. Ein HTML-Dokument wird übrigens nicht programmiert, sondern ganz einfach geschrieben.
Während man bis zur Version HTML 4.01 die Sprache als reine Auszeichnungssprache ansehen konnte, hat sich das bei der Version HTML5 grundlegend geändert. HTML5 ist mehr ein Sammelbegriff für viele unterschiedliche Webtechnologien geworden und ist eine Art Oberbegriff für HTML, CSS, JavaScript und viele neue APIs (Application Programming Interface).

Das Markup: Elemente, Attribute, Werte

Jede Webseite enthält eine Vielzahl von Elementen: Überschriften, Absätze, Bilder, Hyperlinks usw. HTML kennzeichnet jedes dieser Elemente mit einem Tag und gibt dadurch dem Browser die Anweisung, es auf eine bestimmte Art und Weise zu behandeln. Wichtig dabei ist, dass HTML die Bedeutung der Inhalte einer Webseite beschreibt, also deren Semantik (dazu zu einem späteren Zeitpunkt mehr). Ein typisches HTML-Element besteht aus einem öffnenden und einem schließenden Tag, die den Inhalt (Text) einschließen:

<p>Dies ist der Inhalt.</p>

Es gibt allerdings auch leere Elemente, die keinen Textinhalt umgeben. Sie bestehen nur aus einem Tag, das gleichzeitig zum Öffnen und Schließen des Elements dient. Beispiele sind ein Zeilenumbruch oder Bilder:

Die ist ein <br/>Zeilenumbruch.

<img href="bilder/beispielbild.jpg" width="600" height="400" alt="Beispielbild" />

Das zweite Beispiel enthält innerhalb des Tags auch noch sogenannte Attribute mit ihren Werten. Dabei weist href auf den Speicherort des Bildes hin, width und height geben Breite und Höhe des Bildes an und alt ist der Alternativtext, der angezeigt wird, wenn das Bild nicht geladen werden kann. Für bestimmte Elemente sind dabei jeweils nur bestimmte Attribute (und teilweise auch Werte) erlaubt.

Text

Auch wenn im Laufe der Zeit der visuelle Aspekt von Websites in den Mittelpunkt des Designs gerückt ist, spielt die Textinformation doch weiterhin eine wichtige Rolle. Deshalb sollen nun die verschiedenen Formen von Textauszeichnungen auf HTML-Seiten betrachtet werden. Dabei soll insbesondere der semantantische Aspekt näher betrachtet werden.

Überschriften und Absätze

Klassischerweise lässt sich ein längerer Text in Absätze und hierarchisch gegliederte Überschriften unterteilen. Dem tragen die entsprechenden Elemente in HTML Rechnung.

See the Pen eb3d1f171f8624010bd448f813c60094 by Bernd Schiller (@Bernie14153) on CodePen.

Das Beispiel zeigt, dass die verschiedenen Elemente vom Browser auf eine bestimmte Art und Weise dargestellt werden. Die Darstellung kann über CSS nach Belieben beeinflusst werden. Dazu im nächsten Kapitel mehr.

Standardmäßig existieren bei den Überschriften 6 Hierarchieebenen h1 bis h6. Man sollte auf einer Seite maximal eine Überschrift der ersten Ebene einsetzen und dann die Abschnitte entsprechend ihrer Hierarchie mit einer Überschrift höherer Ebene versehen.

Ein p-Element definiert einen Textabsatz. p steht dabei für paragraph, also Absatz, Abschnitt. Absätze dienen der Gliederung eines Textes. Beim Erstellen von HTML-Dateien genügt es nicht, im Editor einen harten Zeilenumbruch einzufügen. WWW-Browser ignorieren solche Umbrüche.

Präformatierter Text und längere Zitate.

Gerade im Zusammenhang mit Seiten, die sich mit Programmierung oder dem Erstellen von Webseiten befassen, ist es oft nötig, Codebeispiele einzuführen, die als solche deutlich erkennbar sind. Auch bei Gedichten spielt ihre äußere Form häufig eine wichtige Rolle und muss entsprechend dargestellt werden. Dies geschieht mit dem pre-Element. Auf anderen Seiten werden dagegen längere Zitate aus literarischen Werken oder aus der Fachliteratur verwendet. Dies geschieht mit dem blockquote-Element.

See the Pen a1f1f28c739d2e96f0c059b0c5d4d67e by Bernd Schiller (@Bernie14153) on CodePen.

Elemente zur Textauszeichnung

Unter Textauszeichnung sind all diejenigen Elemente zusammengefasst, die Textstellen mit einer besonderen Bedeutung kennzeichnen. Auch hier spielt der semantische Aspekt eine wichtige Rolle. Die Elemente sollten nicht aus Formatierungsgründen verwendet werden, sondern sollten der jeweiligen Bedeutung des ausgezeichneten Elements Rechnung tragen. Auf der folgenden Seite sind die entsprechenden Elemente mit ihrer Bedeutung aufgelistet,